﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EntityLinkPage.aspx.cs" Inherits="Easy.Web.Pages.EntityPages.EntityLinkPage" %>

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head runat="server">
    <title></title>
    <link href="/_css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/_css/common.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/_css/iconfont.css" />
    <script src="/_js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/_js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/_js/json2.js" type="text/javascript"></script>
    <script src="/_js/common.js"></script>
    <style>
        .page-header {
            margin: 15px;
        }

            .page-header + .dropdown {
                margin: 0px 15px 10px 5px;
            }

        .panel-heading {
            padding: 3px 15px;
            height: 40px;
            line-height: 34px;
        }

        .row {
            margin: 0px;
        }

        .panel {
            border-radius: 0px;
        }

        * {
            border-radius: 0px !important;
        }

        .editlink {
            text-decoration: none;
            color: white;
            cursor: pointer;
            display: none;
        }

            .editlink:hover {
                text-decoration: none;
                color: white;
            }

        .entitylink:hover {
            background-color: #337ab7 !important;
            color: white !important;
        }

            .entitylink:hover > .editlink {
                display: block;
            }

        .saveBtn {
            float: right;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <form id="form2" runat="server" visible="True">
        <div class="">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">实体关联</h1>

                    <button type="button" onclick="btn_back()" class="btn btn-primary" style="float: right; margin-right: 10px; margin-bottom: 10px">取消</button>
                    <asp:Button ID="Save" CssClass="btn btn-primary saveBtn" runat="server" Text="保存" OnClick="Save_Click" OnClientClick="$('#jsonContent_Save').val(JSON.stringify(getJson()))" />
                    <asp:HiddenField runat="server" ID="jsonContent_Init" />
                    <asp:HiddenField runat="server" ID="jsonContent_Save" />
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row" style="height: 100%">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div style="float: left; height: 32px; width: 200px; line-height: 31px" class="dropdown">
                                <button style="color: white; width: 200px" class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    <span id="currentRoleName">全体角色</span>
                                    <asp:HiddenField ID="currentRoleId" runat="server" />
                                    <span class="caret"></span>
                                </button>
                                <ul id="RoleList" class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    <li><a roletype="" href="#">全体角色</a></li>
                                </ul>
                            </div>
                            <div style="float: right; height: 32px; width: 200px; line-height: 31px" class="dropdown">
                                <button style="color: white; width: 200px" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" onclick="$('#helpModal').modal('show');">
                                    <span>配置帮助</span>
                                </button>
                            </div>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div style="height: 10px"></div>
                            <div class="table-responsive">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                第一级
                                                <button onclick="move($('#LinkEntityGroup_First'),'down')" type="button" style="float: right" class="btn btn-primary glyphicon glyphicon-arrow-down">
                                                </button>
                                                <button onclick="move($('#LinkEntityGroup_First'),'up')" type="button" style="float: right; margin-right: 2px" class="btn btn-primary glyphicon glyphicon-arrow-up">
                                                </button>
                                                <button onclick="CreateFirst()" type="button" style="float: right; margin-right: 2px" class="btn btn-primary glyphicon glyphicon-plus">
                                                </button>
                                            </div>
                                            <div id="LinkEntityGroup_First" class="panel-body list-group" style="padding: 0px">

                                                <%foreach (Easy.Model.EntityLink el in entitylinks)
                                                  { %>
                                                <div oid="<%=el.oid %>" oname="<%=el.oname %>" src="<%=el.src %>" class="list-group-item entitylink">
                                                    <span class="oname"><%=el.oname %></span>
                                                    <a class="glyphicon glyphicon-minus pull-right editlink"></a>
                                                    <a style="padding-right: 10px" class="glyphicon glyphicon-edit pull-right editlink"></a>
                                                </div>
                                                <%} %>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                详情
                                            </div>
                                            <div class="panel-body">
                                                <div class="input-group">
                                                    <span class="input-group-addon" id="basic-addon1">链接地址</span>
                                                    <input id="linksrc" disabled="disabled" type="text" class="form-control" placeholder="若有二级链接，请保持链接地址为空！" aria-describedby="basic-addon1" />
                                                </div>
                                            </div>
                                            <div class="panel-heading">
                                                第二级
                                                <button onclick="move($('#LinkEntityGroup_Second'),'down')" type="button" style="float: right" class="btn btn-primary glyphicon glyphicon-arrow-down">
                                                </button>
                                                <button onclick="move($('#LinkEntityGroup_Second'),'up')" type="button" style="float: right; margin-right: 2px" class="btn btn-primary glyphicon glyphicon-arrow-up">
                                                </button>
                                                <button type="button" onclick="CreateSecond()" style="float: right; margin-right: 2px" class="btn btn-primary glyphicon glyphicon-plus">
                                                </button>
                                            </div>
                                            <div id="LinkEntityGroup_Second" class="panel-body list-group" style="padding: 0px">

                                                <%foreach (Easy.Model.EntityLink el in entitylinks)
                                                  {
                                                      foreach (Easy.Model.EntityLink els in el.second)
                                                      {%>
                                                <div style="display: none" oid="<%=els.oid %>" opid="<%=els.opid %>" oname="<%=els.oname %>" src="<%=els.src %>" class="list-group-item entitylink">
                                                    <span class="oname"><%=els.oname %></span>
                                                    <a class="glyphicon glyphicon-minus pull-right editlink"></a>
                                                    <a style="padding-right: 10px" class="glyphicon glyphicon-edit pull-right editlink"></a>
                                                </div>
                                                <%}
                                                  } %>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
            </div>
        </div>





        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">链接设置</h4>
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <span class="input-group-addon">名称</span>
                            <input id="myModalName" type="text" class="form-control" placeholder="请输入链接名称" aria-describedby="basic-addon1" />
                        </div>
                        <div class="input-group" style="margin-top: 15px">
                            <span class="input-group-addon">地址</span>
                            <input id="myModalAdd" type="text" class="form-control" placeholder="请输入链接地址" aria-describedby="basic-addon1" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="myModalOK">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="helpModalLabel">配置帮助</h4>
                    </div>
                    <div class="modal-body">
                        <div class="panel panel-default">
                            <div class="panel-heading">参数说明</div>
                            <div class="panel-body">
                                {id}：当前实体id
                                <br />
                                {entitydisplayyname}：当前实体显示名称
                                <br />
                                {recorddisplayname}：为当前记录显示名称
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">1：N 配置说明</div>
                            <div class="panel-body">
                                关联实体配置方式：/Pages/DataPages/View/LinkView.aspx?entityname=关联实体名称&attribute=关联实体上对应的字段名&linkentityid={id}&entitydisplayname={recorddisplayname}
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">N：N 配置说明</div>
                            <div class="panel-body">
                                关联实体配置方式：/Pages/DataPages/View/LinkView.aspx?entityAname=A实体&entityBname=B实体&entityMname=关联表名称&linkentityid={id}&type=N2N
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script>

        //监听列表删除、编辑
        $('#LinkEntityGroup_First,#LinkEntityGroup_Second').on("click", 'a', function () {
            if ($(this).hasClass("glyphicon-minus")) {
                $(this).parent().remove();
                if (typeof ($(this).parent().attr("opid")) == "undefined") {
                    $('#LinkEntityGroup_Second').children("div[opid=" + $(this).parent().attr("oid") + "]").remove();
                    $("#linksrc").val("");
                }
            }
            else if ($(this).hasClass("glyphicon-edit")) {
                var Item = $(this).parent();
                $("#myModalName").val($(this).parent().attr("oname"));
                $("#myModalAdd").val($(this).parent().attr("src"));

                $('#myModal').modal('show');
                $('#myModalOK').unbind("click");
                $("#myModalOK").click(function () {
                    Item.children(".oname").html($("#myModalName").val());
                    Item.attr("oname", $("#myModalName").val());
                    Item.attr("src", $("#myModalAdd").val());
                    $("#myModalName").val("");
                    $("#myModalAdd").val("");
                    $('#myModal').modal('hide');
                })
            }
        })
        //监听列表选中
        $("#LinkEntityGroup_First").on("click", "div", function () {
            $(this).addClass("active");
            $(this).siblings(".active").removeClass("active");
            $("#linksrc").val($(this).attr("src"));
            $("#LinkEntityGroup_Second").find("div[opid=" + $(this).attr('oid') + "]").show();
            $("#LinkEntityGroup_Second").find("div[opid!=" + $(this).attr('oid') + "]").hide();
        });
        $("#LinkEntityGroup_Second").on("click", "div", function () {
            $(this).addClass("active");
            $(this).siblings(".active").removeClass("active");
        });
        //监听角色列表选择
        $("#RoleList").on("click", "a", function () {
            $("#currentRoleName").text($(this).html());
            $("#currentRoleId").val($(this).attr('roleid'));

            window.location.href = "/Pages/EntityPages/EntityLinkPage.aspx?Id=" + $.getQueryString("Id") + "&etn=" + $.getQueryString("etn") + "&role=" + $("#currentRoleId").val();
        });
        //
        function getRoleList() {
            $.ajax({
                url: "/Service/Privilege/GetRoleList.ashx",
                async: false,
                type: "post",
                dataType: "json",
                data: {
                },
                success: function (data, textStatus) {
                    var SMShtml = "";
                    for (var i = 0; i < data.length; i++) {
                        SMShtml = '<li><a roleid="' + data[i].RoleId + '" href="#">' + data[i].Name + '</a></li>';

                        $("#RoleList").append(SMShtml);
                    }


                    $("#currentRoleName").text($("#RoleList").find("a[roleid=" + ($.getQueryString("role") == null ? "" : $.getQueryString("role")) + "]").html());
                    $("#currentRoleId").val($("#RoleList").find("a[roleid=" + ($.getQueryString("role") == null ? "" : $.getQueryString("role")) + "]").attr('roleid'));
                },
                error: function (data, textStatus) {
                    alert("ajax错误");
                }
            });

        }
        getRoleList();


        //param
        //container:容器,需为jQuery对象
        //operation:操作
        function move(container, operation) {
            var active = container.children(".active");
            switch (operation) {
                case "up":
                    active.insertBefore(active.prev());
                    break;
                case "down":
                    active.insertAfter(active.next());
                    break;
                default:
                    break;
            }
        }

        //param
        //container:容器,需为jQuery对象
        function CreateFirst() {
            $('#myModal').modal('show');
            $("#myModalLabel").html("创建一级分类");
            $("#myModalName").val("");
            $("#myModalAdd").val("");
            $('#myModalOK').unbind("click");
            $("#myModalOK").click(function () {
                var html = "";
                html +=
                '<div oid="' + new Date().getTime() + '" oname="' + $("#myModalName").val() + '" src="' + $("#myModalAdd").val() + '" class="list-group-item entitylink">\
                    <span class="oname">' + $("#myModalName").val() + '</span>\
                    <a class="glyphicon glyphicon-minus pull-right editlink"></a>\
                    <a style="padding-right: 10px" class="glyphicon glyphicon-edit pull-right editlink"></a>\
                </div>';
                var newitem = $(html);
                $("#LinkEntityGroup_First").append(newitem);
                newitem.click();


                $("#myModalName").val("");
                $("#myModalAdd").val("");
                $("#myModal").modal("hide");
            })
        }
        function CreateSecond() {
            $('#myModal').modal('show');
            $("#myModalLabel").html("创建二级分类");
            $("#myModalName").val("");
            $("#myModalAdd").val("");
            $('#myModalOK').unbind("click");
            $("#myModalOK").click(function () {
                var html = "";
                html +=
                '<div oid="' + new Date().getTime() + '" opid="' + $("#LinkEntityGroup_First").children(".active").attr("oid") + '" oname="' + $("#myModalName").val() + '" src="' + $("#myModalAdd").val() + '" class="list-group-item entitylink">\
                    <span class="oname">' + $("#myModalName").val() + '</span>\
                    <a class="glyphicon glyphicon-minus pull-right editlink"></a>\
                    <a style="padding-right: 10px" class="glyphicon glyphicon-edit pull-right editlink"></a>\
                </div>';
                var newitem = $(html);
                $("#LinkEntityGroup_Second").append(newitem);
                newitem.click();

                $("#myModalName").val("");
                $("#myModalAdd").val("");
                $('#myModal').modal('hide');
            })
        }

        function getJson() {
            var json = new Array();
            var i = 1, j = 1
            $("div[oid]:not([opid])").each(function () {
                var t = new Object();
                t.oid = $(this).attr("oid");
                t.src = $(this).attr("src");
                t.oname = $(this).attr("oname");
                t.second = new Array();
                t.order = i++;
                json.push(t);
            });
            $("div[opid]").each(function () {


                var t = new Object();
                t.oid = $(this).attr("oid");
                t.src = $(this).attr("src");
                t.oname = $(this).attr("oname");
                t.opid = $(this).attr("opid");
                t.order = j++;

                var filterarray = $.grep(json, function (value) {
                    return value.oid == t.opid;
                });

                filterarray[0].second.push(t);
            })

            return json;
        }
        function btn_back() {
            window.location.href = "/Pages/EntityPages/AttributeListPage.aspx?Id=" + $.getQueryString("Id");
        }
    </script>
</body>
</html>
